{extend name="layouts:iframe" /}

{block name="content"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{{$data.totalOrder}}</p>
                    <p>
                        总订单
                        <span class="layuiadmin-span-color"> <i class="layui-inline layui-icon layui-icon-flag"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单金额
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">总</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{{$data.orderAmount}} 元</p>
                    <p>
                        总订单金额
                        <span class="layuiadmin-span-color"> <i class="layui-inline layui-icon layui-icon-flag"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    会员数
                    <span class="layui-badge layui-bg-green layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">{{$data.monthUser}}</p>
                    <p>
                        本月会员
                        <span class="layuiadmin-span-color"> <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    会员数
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">总</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">{{$data.totalUser}}</p>
                    <p>
                        总会员
                        <span class="layuiadmin-span-color"> <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
                    </p>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">
                    内容统计
                    <div class="layui-btn-group layuiadmin-btn-group">
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">去年</a>
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">今年</a>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                                <div carousel-item id="cms-heaparea">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="cmschart_url" value="{{:url(strtolower($model).'/cmsCharts')}}">
{/block}

{block name="pagescript"}
<!--<script type="text/javascript" src="{{:asset('__STATIC__/admin/pages/js/dashboard.js')}}"></script>-->
<script type="text/javascript">
    // 区块轮播切换 -- 必须要有这块,不然显示不出图形
    layui.use(['carousel'], function () {
        var $ = layui.$,
            carousel = layui.carousel,
            element = layui.element,
            device = layui.device();

        // 轮播切换
        $('.layadmin-carousel').each(function () {
            var othis = $(this);
            carousel.render({
                elem: this,
                width: '100%',
                arrow: 'none',
                interval: othis.data('interval'),
                autoplay: othis.data('autoplay') === true,
                trigger: (device.ios || device.android) ? 'click' : 'hover',
                anim: othis.data('anim')
            });
        });

        element.render('progress');
    });

    layui.use(['layer', 'echarts'], function () {
        var $ = layui.$,
            echarts = layui.echarts;


        // 内容统计
        cmsStatistics();

        // 订单统计
        function cmsStatistics() {
            var $ = layui.$;
            var url = $('.cmschart_url').val();
            $.post(
                url,
                {},
                function (res) {
                    if (res.status == 1) {
                        cmsCharts(res.data);
                    }
                }
            );
            return false;
        }

        function cmsCharts(data) {
            var data = eval(data);
            //console.log(data);
            var dayData = data.day;
            var countData = data.count;
            var totalViewsData = data.totalViews;
            var max_left = calMax(countData);
            var max_right = calMax(totalViewsData);
            console.log(max_left);
            console.log(max_right);

            // 订单统计 - 堆积面积图(折线图)
            var echHeaparea = [],
                options = [
                    {
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['数量','查看']
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                //boundaryGap : false, // 坐标轴两端是否空白
                                data : dayData
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                name : '数量',
                                min: 0,
                                max: max_left,
                                splitNumber: 5,
                                interval: max_left / 5,
                                axisLabel : {
                                    formatter: '{value} 个'
                                }
                            },
                            {
                                type : 'value',
                                name : '查看',
                                min: 0,
                                max: max_right,
                                splitNumber: 5,
                                interval: max_right / 5,
                                axisLabel : {
                                    formatter: '{value}'
                                }
                            }
                        ],
                        series : [
                            {
                                name:'数量',
                                type:'bar',
                                //stack: '总量',
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data: countData,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name:'查看',
                                type:'line',
                                yAxisIndex:1,
                                //stack: '总量',
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data: totalViewsData
                            }
                        ]
                    }
                ],
                elemDataView = $('#cms-heaparea').children('div'),
                renderDataView = function(index){
                    echHeaparea[index] = echarts.init(elemDataView[index], layui.echartsTheme);
                    echHeaparea[index].setOption(options[index]);
                    window.onresize = echHeaparea[index].resize;
                };

            if(!elemDataView[0]) return;

            renderDataView(0);
        }

        function calMax(arr) {
            var max = arr[0];
            for (var i = 0; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i];
                }
            }
            var maxInt = Math.ceil(max / 10);
            var maxVal = maxInt * 10;
            return maxVal;
        }
    });
</script>
{/block}
